<!--
 * new page
 * @author: dh
 * @since: 2023-12-21
 * Banner.vue
-->
<template>
  <div class="banner">
    <el-skeleton :loading="loading" animated>
      <template #template>
        <el-skeleton-item class="skeleton-img" variant="image" />
        <el-skeleton-item class="skeleton-img" variant="image" />
        <el-skeleton-item class="skeleton-img" variant="image" />
        <el-skeleton-item class="skeleton-img" variant="image" />
      </template>
      <template #default>
        <swiper
          class="banner-swiper"
          :autoplay="{
            delay: 1500
          }"
          :loop="true"
          :modules="modules.modules"
          :pagination="{ clickable: true }"
          :slides-per-view="4"
          :space-between="30"
        >
          <swiper-slide v-for="item of bannerList" :key="item.imageUrl">
            <el-image
              :src="item.imageUrl"
              :alt="item.typeTitle"
              class="banner-image"
            >
              <template #placeholder>
                <div class="image-slot">
                  <i class="iconfont icon-placeholder"></i>
                </div>
              </template>
            </el-image>
          </swiper-slide>
        </swiper>
      </template>
    </el-skeleton>
  </div>
</template>

<script setup lang="ts">
import { getBanner } from "@/api/api";
import { onMounted, ref, reactive } from "vue";
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import { Navigation, Pagination, Scrollbar, Autoplay  } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import "swiper/css/scrollbar";
/**
 * ---------类型定义---------
 */
 interface bannerType {
    imageUrl:string,
    typeTitle:string
}
interface modulesType {
    modules: Array<any>;
}

 /**
 * ---------变量定义---------
 */
const loading = ref<boolean>(true);
let bannerList:Array<bannerType> = reactive([]);
const modules = reactive<modulesType>({
  modules: [Navigation, Pagination, Scrollbar, Autoplay ],
});
const getBnr = async () => {
  const { banners } = await getBanner();
  bannerList = banners;
  loading.value = false;
};

onMounted(() => {
  getBnr();
});
</script>

<style lang="scss" scoped>
.banner {
    width: 100%;
  .banner-image {
    border-radius: 12px;
    width: 400px;
    cursor: pointer;
  }
}
.el-skeleton {
    display: flex;
    justify-content: space-between;
    padding: 40px 0;

    .skeleton-img {
        flex: 1;
        margin-right: 30px;
        height: 100px;
    }
}
.swiper {
    .swiper-slide {
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 20px 27px rgb(0 0 0 / 5%);
    }
    :deep(.swiper-pagination-bullet-active) {
        width: 15px;
        border-radius: 4px;
        background: var(--el-menu-active-color);
    }
}
</style>
